<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img {
				height: 60px;
				vertical-align: middle;
			}
			
			span {
				font-size: 45px;
				line-height: 60px;
				vertical-align: middle;
			}
			
			.wrap {
				margin: 200px auto;
				width: 500px;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<img src="images/0.png" />
			<img src="images/0.png" />
			<span>:</span>
			<img src="images/0.png" />
			<img src="images/0.png" />
			<span>:</span>
			<img src="images/0.png" />
			<img src="images/0.png" />
		</div>
	</body>
	<script type="text/javascript">
		(function() {
			var imgs = document.getElementsByClassName("wrap")[0].getElementsByTagName("img");
			fn();

			function fn() {
				var oData = new Date();
				var h = oData.getHours() + "";
				var m = oData.getMinutes() + "";
				var s = oData.getSeconds() + "";
				//			if(h.length === 1) {
				//				h = "0" + h;
				//			}
				//			if(m.length === 1) {
				//				m = "0" + m;
				//			}
				//			if(s.length === 1) {
				//				s = "0" + s;
				//			}
				h.length === 1 && (h = "0" + h);
				m.length === 1 && (m = "0" + m);
				s.length === 1 && (s = "0" + s);
				var all = h + m + s;
				for(var i = 0, len = all.length; i < len; i++) {
					imgs[i].src = `images/${all[i]}.png`;
				}
			}
			setInterval(function() {
				fn();
			}, 1000);
		})();
	</script>

</html>